<template>
  <div id="PersonalizationSettings">
    <h3 class="title">个性化设置</h3>
    <div class="SettingMain">
      <div class="SettingItem">
        <span class="SettingItemTitle">全局颜色修改</span>
        <div class="SettingItemContent">
          <el-button type="primary" size="small" @click="openDialog">修改</el-button>
        </div>
      </div>
    </div>

    <!-- 修改主题色对话框 -->
    <el-dialog v-model="showDialog" title="修改主题色">
      <div class="color-picker-grid">
        <div class="color-picker-item" v-for="(color, key) in colors" :key="key">
          <span class="color-label">{{ key }}</span>
          <el-color-picker v-model="tempColors[key]" show-alpha></el-color-picker>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelChanges">取消</el-button>
          <el-button @click="resetToDefaults">恢复默认</el-button>
          <el-button type="primary" @click="updateColors">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import Color from "element-plus/es/components/color-picker/src/utils/color";

const showDialog = ref(false);
const colors = ref({
  '背景颜色': '--bg-color',
  '背景右下角阴影': '--bg-top-shadow',
  '背景左上角阴影': '--bg-bottom-shadow',
  '文字颜色': '--text-color',
  '输入框聚焦左上内阴影': '--input-focus-shadow',
  '输入框聚焦右下内阴影': '--input-focus-shadow2',
  '验证码文字颜色': '--btn-text-color',
  '输入框错误提示颜色': '--text-error-color',
  '按钮聚焦左上阴影颜色': '--btn-focus-shadow',
  '按钮聚焦右上阴影颜色': '--btn-focus-shadow2',
  '加粗文字颜色': '--b-color',
  '加粗文字聚焦颜色': '--b-focus-color',
  '右侧边框颜色': '--right-border',
  '纯白色': '--white',
  '图标颜色': '--icon-color',
  '按钮中的文字颜色': '--text-color2',
  '按钮聚焦背景色': '--btn-hover-color',
  '按钮背景色': '--btn-color',
  '边框颜色': '--border-color',
  'span颜色': '--span-color',
  '信息颜色': '--info-color'
});
const tempColors = ref({});

const openDialog = () => {
  // 保存当前颜色值
  for (const [key, value] of Object.entries(colors.value)) {
    tempColors.value[key] = getComputedStyle(document.documentElement).getPropertyValue(value).trim();
  }
  showDialog.value = true;
};

const cancelChanges = () => {
  // 恢复原始颜色值
  for (const [key, value] of Object.entries(colors.value)) {
    tempColors.value[key] = getComputedStyle(document.documentElement).getPropertyValue(value).trim();
  }
  showDialog.value = false;
};

const resetToDefaults = () => {
  // 恢复默认颜色值
  for (const [key, value] of Object.entries(colors.value)) {
    tempColors.value[key] = defaultColors[value];
  }
};

const updateColors = () => {
  // 更新全局颜色变量
  for (const [key, value] of Object.entries(colors.value)) {
    document.documentElement.style.setProperty(value, tempColors.value[key]);
  }

  // 关闭对话框
  showDialog.value = false;
  ElMessage.success('主题色更新成功');
};

const defaultColors = {
  '--bg-color': '#ecf0f3',
  '--bg-top-shadow': '#d1d9e6',
  '--bg-bottom-shadow': '#f9f9f9',
  '--text-color': '#181818',
  '--input-focus-shadow': '#bed5ff',
  '--input-focus-shadow2': '#e1e1e1',
  '--btn-text-color': '#4B70E2',
  '--text-error-color': '#e60707',
  '--btn-focus-shadow': '#c2d2ff',
  '--btn-focus-shadow2': '#ffffff',
  '--b-color': '#5073df',
  '--b-focus-color': '#7d9aff',
  '--right-border': '#c1c1c1',
  '--white': '#ffffff',
  '--icon-color': '#646879',
  '--text-color2': '#f9f9f9',
  '--btn-hover-color': '#4B70E2',
  '--btn-color': '#409EFF',
  '--border-color': '#cccccc',
  '--span-color': '#666666',
  '--info-color': '#333333'
};

onMounted(() => {
  // 获取当前主题色
  for (const [key, value] of Object.entries(colors.value)) {
    tempColors.value[key] = getComputedStyle(document.documentElement).getPropertyValue(value).trim();
  }
});
</script>

<style scoped lang="less">
@import "./PersonalizationSettings.less";
</style>
